/* 系统字典页面 */
<template>
  <zero-vxe-grid v-loading="loading">
    <div slot="aside">
      <TreeSide @sysDictFun="sysDictFun" @renewFun="renewFun" />
    </div>
    <div slot="main">
      <vxe-grid v-bind="viewModuleOptions" :ref="viewModuleOptions.ref" v-on="viewModuleOptions.fns">
        <template #buttons>
          <vxe-button content="新增" status="primary" icon="vxe-icon-add" @click="insertEvent"
                      v-hasPermi="['sysDictData:add']" :disabled="viewModuleOptions.searchForm.dictType === undefined"/>
          <vxe-button content="更新所有字典缓存" @click="() => renewFun()"
                      v-hasPermi="['sysDictData:renew']"/>
          <vxe-button content="批量删除" status="danger" icon="vxe-icon-delete" @click="handleDelete"
                      v-hasPermi="['sysDictData:delete']" :disabled="viewModuleOptions.dataListSelections.length <= 0"/>
        </template>
        <template #operation="{ row }">
          <template v-if="$refs[viewModuleOptions.ref].isEditByRow(row)">
            <vxe-button mode="text" status="primary" content="保存"
                        @click="saveRowEvent(row)"></vxe-button>
          </template>
          <template v-else>
            <vxe-button mode="text" status="primary" content="编辑" v-hasPermi="['sysDictData:update']"
                        @click="editRowEvent(row)"></vxe-button>
          </template>
          <vxe-button mode="text" status="danger" content="删除" v-hasPermi="['sysRole:delete']"
                      @click="handleDelete(row, viewModuleOptions.ref)"></vxe-button>
        </template>
        <template #status_default="{ row }">
          <dict-tag :options="dict.type.enable_status" :value="row.status"/>
        </template>
        <template #status_edit="{ row }">
          <vxe-select v-model="row.status" type="text" transfer>
            <vxe-option v-for="dict in dict.type.enable_status" :key="dict.value" :label="dict.label"
                        :value="dict.value"></vxe-option>
          </vxe-select>
        </template>

        <template #tools>
          <vxe-button :title="viewModuleOptions.isFullscreen ? '还原' : '全屏'" @click="toggleIsFullscreen"
                      class="tool-btn"
                      :icon="viewModuleOptions.isFullscreen ? 'vxe-icon-minimize' : 'vxe-icon-fullscreen'" circle/>
        </template>
      </vxe-grid>
    </div>
    <!-- 右边信息-end -->
  </zero-vxe-grid>
</template>

<script>
import viewModule from '@/mixins/vxe-grid.js'; // 公共js
import TreeSide from './components/TreeSide.vue'; // 左边树
import {checkPermi} from "@/utils/permission.js";
import addUpdate from "@/views/system/user/components/add-update.vue"; //权限
export default {
  name: 'SysDictData',
  mixins: [viewModule],
  dicts: ['enable_status'],
  components: {addUpdate, TreeSide},
  data() {
    return {
      addUrl: '/sysDictData',
      updateUrl: '/sysDictData',
      viewModuleOptions: {
        keepSource: true,
        activatedIsNeed: false,
        dataUrl: '/sysDictData/pageList',
        removeUrl: '/sysDictData',
        //列动态定义
        columns: [
          {type: 'checkbox', width: 50},
          {field: 'dictType', title: '字典类型'},
          {
            field: 'label', title: '字典标签', editRender: {
              name: 'input', attrs: {maxlength: 50},
              enabled: checkPermi(['sysDictData:update', 'sysDictData:add'])
            }
          },
          {
            field: 'value', title: '字典键值', editRender: {
              name: 'input', attrs: {maxlength: 50},
              enabled: checkPermi(['sysDictData:update', 'sysDictData:add'])
            }
          },
          {
            field: 'sort', title: '排序', width: 80, editRender: {
              name: 'input',
              enabled: checkPermi(['sysDictData:update', 'sysDictData:add'])
            }
          },
          {
            field: 'status',
            title: '状态',
            editRender: {
              name: 'input',
              enabled: checkPermi(['sysDictData:update', 'sysDictData:add'])
            },
            slots: {default: 'status_default', edit: 'status_edit'}
          },
          {
            field: 'cssClass', title: '样式属性（其他样式扩展）', editRender: {
              name: 'input', attrs: {maxlength: 255},
              enabled: checkPermi(['sysDictData:update', 'sysDictData:add'])
            }
          },
          {
            field: 'listClass', title: '表格字典样式', editRender: {
              name: 'input', attrs: {maxlength: 255},
              enabled: checkPermi(['sysDictData:update', 'sysDictData:add'])
            }
          },
          {field: 'createTime', title: '创建时间'},
          {
            field: 'remarks',
            title: '备注',
            editRender: {
              name: 'textarea',
              attrs: {maxlength: 255},
              enabled: checkPermi(['sysDictData:update', 'sysDictData:add'])
            }
          },
          {
            title: '操作', width: 100, slots: {default: 'operation'},
            visible: checkPermi(['sysDictData:update', 'sysDictData:add', 'sysDictData:delete'])
          }
        ],
        "edit-config": {//表格修改配置
          trigger: 'click',
          mode: 'row',
          showStatus: true
        },
        "edit-rules": {//表格修改校验规则
          label: [{required: true, message: '请输入字典标签'}],
          sort: [{required: true, message: '请输入排序'}],
          value: [{required: true, message: '请输入字典键值'}]
        },
      }
    }
  },
  methods: {
    sysDictFun(dictType) {
      this.viewModuleOptions.searchForm.dictType = dictType
      this.getDataList()
    }
    ,
    editRowEvent(row) {
      this.$refs[this.viewModuleOptions.ref].setEditRow(row)
    },
    async insertEvent() {
      const record = {
        dictType: this.viewModuleOptions.searchForm.dictType,
        status: 'T',
        sort: 1
      }
      const {row: newRow} = await this.$refs[this.viewModuleOptions.ref].insertAt(record, null)
      await this.$refs[this.viewModuleOptions.ref].setEditRow(newRow, 'label')
    }
    ,
    async saveRowEvent(row) {
      const errMap = await this.$refs[this.viewModuleOptions.ref].validate().catch(errMap => errMap)
      if (!errMap) {
        this.$refs[this.viewModuleOptions.ref].clearEdit().then(() => {
          this.loading = true
          const config = {
            url: row.id ? this.updateUrl : this.addUrl,
            method: row.id ? 'put' : 'post',
            data: row
          }
          this.$axiosAuth(config)
              .then(res => {
                this.loading = false
                this.getDataList()
                this.$message.success(res.msg)
              })
              .catch(() => {
                this.loading = false
              })
        })
      }
    },
    renewFun(dictType) {
      let data;
      let msg;
      if (dictType) {
        data = [dictType]
        msg = '是否更新字典"' + data + '"的缓存数据？'
      } else {
        data = []
        msg = '是否更新所有字典的缓存数据？'
      }
      this.$modal.confirm(msg)
          .then(() => {
            this.loading = true
            let config = {
              url: "/sysDictData/renew",
              method: 'put',
              data: data
            }
            this.viewModuleOptions.axios(config).then(res => {
              this.$message.success(res.msg)
            }).finally(() => {
              this.loading = false
            });
          }).catch(() => {
      })
    }
  }
}
</script>
